<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>分类管理</title>
    <link rel="icon" href="/images/logo.ico"/>
    <link rel="stylesheet" href="/lib/semantic/semantic.min.css">
    <link rel="stylesheet" href="/css/me.css">
    <link rel="stylesheet" href="/lib/animate/animate.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body class="m-back-img1">
<!--导航-->
<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small animated fadeInDown m-opacity"
     style="z-index: 99 !important;">
    <div class="ui container">
        <div class="ui inverted secondary stackable  menu">  <!--stackable 可堆叠的 应用在移动端-->
            <h2 class="ui teal header item">后台管理</h2>
            <a href="/" class=" nav_item item m-mobile-hide"><i class="coffee icon"></i>博客首页</a>
            <a href="/back/index.html" class=" nav_item item m-mobile-hide "><i class="home icon"></i>管理首页</a>
            <a href="/back/blogs.html" class=" nav_item item m-mobile-hide"><i class="book icon"></i>博客</a>
            <a href="/back/types.html" class="nav_item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="/back/tags.html" class="nav_item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <div class="nav_item right dropdown  menu m-mobile-hide">
                <div class="ui dropdown item">
                    <div class="text">
                        <img id="avatar" class="ui avatar image" src="/images/avatar/zry.jpg" alt="">
                        <span id="nickname">猫喵喵</span>
                    </div>

                    <i class="dropdown icon"></i>
                    <div class="menu element-ui dialog" style="z-index: 999 !important;">
                        <a href="/back/user.html" class="item">个人信息</a>
                        <a onclick="logout()"  class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" id="menu_toggle" class="ui black button m-mobile-show m-top-right ">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--top attached 完整拼接成一个相连区域 bottom attached-->
<!--中间内容-->
<div tyle=" padding-top: 9em !important; padding-bottom: 9em !important;" class="m-padded-tb-4em m-container-small ">
    <div class="ui container">
        <!--        加一个celled 网格-->
        <table class="ui celled table">
            <thead>
            <tr>
                <th>id</th>
                <th>名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="pageContent">
            <!--           js填充-->
            </tbody>
            <tfoot>
            <tr>
                <th colspan="3" class="center aligned ">
                    <div id="pageLR" class="ui pagination  mini menu">
                        <!--           js填充-->

                    </div>
                    <a href="/back/types-input.html" class="ui mini right floated teal basic button">新增</a>
                </th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
<br>
<br>
<div class="ui container">
    <div class="ui tiny modal type-delete-dialog">
        <div class="header title">确定删除吗？</div>
        <div class="content">
            确定删除这个分类吗？属于这个分类的的一些文章不会被删除。
        </div>
        <div class="actions">
            <button class="ui negative button">否</button>
            <button class="ui positive button">是</button>
        </div>
    </div>
</div>
<!--底部footer-->
<footer class="ui inverted vertical segment m-padded-tb-massive">
    <!--    居中-->
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../images/weixin.png"
                             class="ui rounded image" alt="" width="110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted link list m-text-thin m-text-spaced">
                    <a href="#" class="item">Email：123456@qq.com</a>
                    <a href="#" class="item">QQ:123456789</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity">
                    这厮我的个人博客，会分享关于编程，思考，随笔相关的内容，欢迎大家访问，希望可以给到这的人有所帮助...
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2021-2022 . All rights reserved.</p>
        <div>
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode="
               style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img
                    src="https://beian.mps.gov.cn/favicon.ico" style="float:left;">
                <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#ff1c04;">京ICP备
                    xxxxxxxxxx号</p></a>
        </div>
    </div>

</footer>
</body>
<!-- jquery -->
<script src="/js/jquery-3.6.0.min.js"></script>
<!-- semantic-ui-->
<script type="text/javascript" src="/lib/semantic/semantic.min.js"></script>
<!-- layer -->
<script type="text/javascript" src="/lib/layer/layer.js"></script>
<!--comment.js-->
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript">
    $(".ui.dropdown").dropdown({
        on: "hover"
    });
    $(function () {
        getUserInfo();
        getPage(1);
    });

    function getPage(pageNum) {
        $.ajax({
            url: "/admin/types?pageNum=" + pageNum + "&pageSize=6",
            type: "GET",
            success: function (result) {
                layer.closeAll();
                if (result.code === 200) {
                    setPage(result.data);
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function (obj) {
                console.log("error");
                layer.closeAll();
                layer.msg("获取数据失败");
            }
        });

        function setPage(obj) {
            //每页的大小
            var pageSiz = obj.size;
            //数据
            var types = obj.records;
            //数据总数
            var total = obj.total;
            //计算当前页的数据量
            console.log(types.length);
            //当前页
            var current = obj.current;
            //总页数
            var pages = obj.pages;


            var page_content = '';//当前页内容

            for (var i = 0; i < types.length; i++) {
                page_content += '<tr class="typeLine' +
                    types[i].id
                    + '"><td>' + (i + 1) + '</td><td>'
                    + types[i].name
                    + '</td><td>'
                    + '<a  onclick="updateType('
                    + types[i].id
                    + ')" class="ui mini teal basic button">编辑</a> '
                    + ' <a onclick="deleteType('
                    + "\'"
                    + types[i].id
                    + "\'"
                    + ')" class="ui mini red basic button">删除</a>'
                    + '</td></tr>';
            }
            $("#pageContent").html(page_content);

            var page_LR = "";
            if (current === 1) {
                page_LR = '<a onclick="getPage('
                    + (current + 1)
                    + ')" class="icon item" >'
                    + '<i class="right chevron icon"></i></a>';
            } else if (current === pages) {
                page_LR = '<a onclick="getPage('
                    + (current - 1)
                    + ') " class="icon item">'
                    + '<i class="left chevron icon"></i>'
                    + '</a>';
            } else if (1 < current && current < pages) {
                page_LR = '<a onclick="getPage('
                    + (current - 1)
                    + ')" class="icon item">'
                    + '<i class="left chevron icon"></i>'
                    + '</a><a onclick="getPage('
                    + (current + 1)
                    + ')" class="icon item" >'
                    + '<i class="right chevron icon"></i></a>';
            }
            if (1 >= pages) {
                page_LR = "";
            }
            $("#pageLR").html(page_LR);

        }
    }

    function updateType(id) {
        window.location.href = "/back/types-input.html?typeId=" + id;
    }

    function deleteType(id) {
        $(".modal.type-delete-dialog").modal({ // 回调方法
            onApprove: function () { // 单击确认按钮
                $.ajax({
                    url: "/admin/types/" + id,
                    type: "DELETE",
                    async: false,
                    success: function (data) {
                        layer.closeAll();
                        if (data.code === 204) {
                            $('.typeLine' + id).toggleClass("no");
                        }
                        layer.msg(data.msg);
                    },
                    error: function (obj) {
                        layer.closeAll();
                        layer.msg("请求超时");
                    }
                });
            },
            onDeny: function () {  //单击取消按钮
                console.log("拒绝")
            }
        }).modal("show");
        return false;
    }

</script>

</html>